<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%

 String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getServletContext().getContextPath()+"/";


%>
<head>
<base href="<%=path%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>统计分析图</title>
    <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="static/js/highcharts.js"></script>
    <script type="text/javascript" src="static/js/exporting.js"></script>
    <script type="text/javascript" src="static/js/highcharts-zh_CN.js"></script>  
    <script type="text/javascript">
          $(function () {
        	  $.post("tjfx/tjfx.do",function(data){
        		  //从后端获取到的map 转换 json
        		  // var map = {name{},num{}}
        		  $('#container').highcharts({
        		        chart: {
        		            type: 'column'
        		        },
        		        title: {
        		            text: '视频统计分析图'
        		        },
        		        subtitle: {
        		            text: '数据来源:com.zhiyou.100'
        		        },
        		        xAxis: {
        		            categories: data.name,
        		            crosshair: true,
        		        },
        		        yAxis: {
        		            min: 0,
        		            title: {
        		                text: '视频点击（times）'
        		            }
        		        },
        		        tooltip: {
        		            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        		            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        		            '<td style="padding:0"><b>{point.y:.1f} 次 </b></td></tr>',
        		            footerFormat: '</table>',
        		            shared: true,
        		            useHTML: true
        		        },
        		        plotOptions: {
        		            column: {
        		                borderWidth: 0
        		            }
        		        },
        		        series: [{
        		            name:"访问量",
        		            data:data.num,
        		        }]
        		    });
        		  
        		},"json");

        	  });
    </script>
<style>
            .jumbotron{
                width: 80%;
                margin: auto;
                margin-top: -60px;
                border-radius: 5px;
            }
            .jumbotron h3{
                margin-left: 50px;
                margin-top: 20px;
            }
            #div1{
                width: 90%;
                margin: auto;
            }
         
         </style>
         <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     
</head>
<body>
 <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">视频管理系统</a>
                  </div>
              
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
				      <li>
				      <a href="video/video_list.do">视频管理 <span class="sr-only">(current)</span></a>
				     </li>
				     <li><a href="speaker/speaker_list.do">主讲人管理</a></li>
				     <li><a href="course/course_list.do">课程管理</a></li>
				     <li><a href="tjfx/tjfx2.do">课程分析</a></li>
			      </ul>       
                    <ul class="nav navbar-nav navbar-right">
                      <li><a href="admin/loginOut.do">admin<span class="glyphicon glyphicon-log-out"aria-hidden="true"></span></a>
                    </li>
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
              </nav>

              <div class="jumbotron">
                    <h3>课程分析-课程管理</h3>
                  </div>

    <div id="container" style="min-width:400px;height:400px"></div>
                  
</body>
</html>